<template>
  <interval height="120" />
  <!-- 电脑显示banner -->
  <banner-big :bannerList="bannerList" />
  <!-- 手机端显示banner -->
  <banner-small :bannerList="bannerListSmall" />
  <interval height="40" />
  <!-- 推荐歌单展示橱窗 -->
  <showcase
    name="personalizedList"
    :title="personalizedTitle"
    :caseList="personalizedList"
    :isSong="false"
  />
  <!-- 推荐歌曲展示橱窗 -->
  <showcase
    name="topList"
    :title="topListTitle"
    :caseList="topList"
    :isSong="true"
  />
  <interval height="40" />
  <!-- 热评墙跑马灯展示 -->
  <suspense>
    <comment-wall :currentSong="currentSong" />
  </suspense>
  <interval height="40" />
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { defineComponent } from 'vue'

import showcase from '@/components/showcase/showcase.vue'
import BannerSmall from '@/components/banner/banner-small.vue'
import Interval from '@/components/interval/interval.vue'
import BannerBig from '@/components/banner/banner-big.vue'
import CommentWall from '@/components/comment-wall/comment-wall.vue'

import { CurrentSong } from './types'
export default defineComponent({
  components: { showcase, BannerSmall, BannerBig, Interval, CommentWall },
  async setup() {
    const store = useStore()
    /* 橱窗标题 */
    const topListTitle = '新歌推荐'
    const personalizedTitle = '热门歌单'
    /* 请求数据并存储入vuex的state中 */
    await store.dispatch('index/getBannerListAction')
    await store.dispatch('index/getTopListAction')
    await store.dispatch('index/getPersonalizedListAction')
    /* 获取请求的数据 */
    const bannerList = store.state.index.bannerList
    const bannerListSmall = bannerList.slice(0, 5)
    const personalizedList = store.state.index.personalizedList
    const topList = store.state.index.topList.slice(0, 8)
    /* 模拟歌曲数据，用于用户首次进入网站的热评展示 */
    let currentSong: CurrentSong = {
      id: 1880855946,
      name: '偏偏喜欢你',
      artist: '霓虹花园',
      picUrl:
        'http://p1.music.126.net/fpfFspuQW-2J8meRr1q-Aw==/109951166450681435.jpg?param=140x140'
    }

    return {
      topListTitle,
      personalizedTitle,
      topList,
      bannerList,
      personalizedList,
      bannerListSmall,
      currentSong
    }
  }
})
</script>

<style scoped></style>
